<eda-dialog [inject]="dialog">

  <div body class="grid" style=" height: 100%;">
    <div class="col-9">

        <div class="eda-chart-panel" style=" width: 100%; background-color: var(--panel-color);">
          <panel-chart *ngIf="display" #PanelChartComponent [props]="panelChartConfig"  style="height: 100%; width: 100%; display:block;  margin-top:1em">
          </panel-chart>
        </div>

    </div>


    <div class="col-3">


      <h6 i18n="@@colorsCoordChartH6" class="custom-border-b1">
        Rango de colores
      </h6>

      <div class="chart-color-selection" >
        <div class="mb-1" style="display:grid;grid-template-columns: repeat(3, 1fr);gap: 10px;align-items: center;">
            <a i18n="@@colorsInitialText"> Color inicial </a>
            <input type="text" [(ngModel)]="initialColor"  pInputText  (keyup)="handleInputColor()" />
            <p-colorPicker [(ngModel)]="initialColor" appendTo="body"   (onHide)="handleInputColor()"></p-colorPicker>
        </div>
        <div class="mb-1" style="display:grid;grid-template-columns: repeat(3, 1fr);gap: 10px;align-items: center;">
          <a i18n="@@colorsFinalText" >Color final </a>
          <input type="text" [(ngModel)]="finalColor" pInputText (keyup)="handleInputColor()" />
          <p-colorPicker [(ngModel)]="finalColor" appendTo="body" (onHide)="handleInputColor()"></p-colorPicker>
        </div>
      </div>

      <h6 i18n="@@LogarithmicScaleH6" class="custom-border-b1">
        ¿Escala logaritmica?
      </h6>
      <div class="mb-1">
        <p-inputSwitch [(ngModel)]="logarithmicScale" (onChange)="renderMap()">
        </p-inputSwitch>
      </div>
      <h6 i18n="@@noMouseH6" class="custom-border-b1">
        Activar funciones del mouse
      </h6>
      <div class="mb-1">
        <p-inputSwitch [(ngModel)]="draggable" (onChange)="nullMouseOptions()">
        </p-inputSwitch>
      </div>
    </div>
  </div>

  <div footer>
    <div class="ui-dialog-buttonpanel ui-widget-content ui-helper-clearfix text-right">
      <button type="submit" pButton (click)="saveChartConfig()" icon="fa fa-check"
        class="p-button-raised p-button-success" i18n-label="@@guardarButton" label="Confirmar"
        id="eda_chart_dialog_confirmar">
      </button>
      <button type="button" pButton (click)="closeChartConfig()" icon="fa fa-times"
        class="p-button-raised p-button-danger" i18n-label="@@cancelarButton" label="Cancelar">
      </button>
    </div>
  </div>
</eda-dialog>